<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章列表，前后端对接</title>
    <!--引入vue组件-->
    <script src="/public/js/vue.js"></script>
    <!--引入一款异步请求的插件：axios，用于发送异步请求-->
    <script src="/public/js/axios.js"></script>
</head>
<body>

    <div id="app">
        <table border="1">
            <tr>
                <td>序号</td>
                <td>文章标题</td>
                <td>文章内容</td>
            </tr>
            <tr v-for="(a,index) in articles">
                <td>{{index+1}}</td>
                <td>{{a.title}}</td>
                <td>{{a.content}}</td>
            </tr>
        </table>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                articles:[
                    {title:'文章1',content:"文章1内容1"},
                    {title:'文章2',content:"文章2内容1"}
                ]
            },
            methods:{
                loadAll(){

                }
            },
            // 创建vue对象时候立刻执行：发送异步请求，返回json格式数据（文章列表）
            created(){
                this.loadAll();
            }
        })
    </script>

</body>
</html>